﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加dayjs到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加vue到全局 -->
    <script src="./publicJs/vue.global.prod.js"></script>
    <!-- 自动添加axios到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加Cookies到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加XLSX到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>

    <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
    <!-- 自动添加ElementPlus到全局 -->
    <script src="./publicJs/element-plus.index.full.js"></script>
    <script src="./publicJs/index.iife.min.js"></script>
    <!-- 添加Element Plus图标 -->
    <!-- <script src="./publicJs/element-plus-icons-vue.js"></script> -->
    <!-- 添加组件到全局 -->
    <script src="./components/production-order-info.js"></script>
    <script src="./components/production-process-info.js"></script>
    <script src="./components/production-bom-info.js"></script>
    <script src="./components/production-sn-info.js"></script>

    <title>生产订单管理</title>
  </head>

  <body>
    <div id="app">
      <div v-loading="loading">
        <el-row :gutter="10">
          <el-col :span="24" style="text-align: left">
            <div style="display: flex">
              <el-button type="" @click="buttonClicks.xiaDaBtnClick" v-show="[0].includes(tableDatas.filters.state)">
                <el-icon :size="20" color="#67C23A">
                  <Bottom />
                </el-icon>
                下达
              </el-button>
              <el-button type="" @click="buttonClicks.addBtnClick" v-show="[10].includes(tableDatas.filters.state)">
                <el-icon :size="20" color="#67C23A">
                  <Top />
                </el-icon>
                撤销下达
              </el-button>
              <el-button type="" @click="buttonClicks.addBtnClick" v-show="[10].includes(tableDatas.filters.state)">
                <el-icon :size="20" color="#67C23A">
                  <Right />
                </el-icon>
                预排产
              </el-button>
              <el-button
                type=""
                @click="buttonClicks.deleteBtnClick"
                v-show="[0,10,11,2].includes(tableDatas.filters.state)"
              >
                <el-icon :size="20" color="#F56C6C">
                  <Delete />
                </el-icon>
                删除
              </el-button>
              <el-button type="" @click="buttonClicks.addBtnClick">
                <el-icon :size="20" color="#67C23A">
                  <Refresh />
                </el-icon>
                刷新
              </el-button>
              <el-button type="" @click="buttonClicks.addBtnClick" v-show="[11,3].includes(tableDatas.filters.state)">
                <el-icon :size="20" color="#67C23A">
                  <Calendar />
                </el-icon>
                时间
              </el-button>
              <el-button type="" @click="buttonClicks.addBtnClick" v-show="[0,10].includes(tableDatas.filters.state)">
                <el-icon :size="20" color="#67C23A">
                  <Check />
                </el-icon>
                确认完成
              </el-button>
              <el-input v-model="tableDatas.filters.searchText" clearable style="width: 400px; margin-left: 10px">
                <template #prepend>
                  <el-icon style="font-weight: bold">
                    <Search />
                  </el-icon>
                  搜索
                </template>
              </el-input>
            </div>
          </el-col>
        </el-row>

        <el-dialog v-model="dialogDatas.dialogFormVisible" :title="dialogDatas.title" top="5vh" width="80vw">
          <el-scrollbar max-height="70vh">
            <el-tabs model-value="生产订单">
              <el-tab-pane label="生产订单" name="生产订单">
                <ProductionOrderInfo :workorder="dialogDatas.orderData.workorder"></ProductionOrderInfo>
              </el-tab-pane>
              <el-tab-pane label="工艺配置" name="工艺配置">
                <ProductionProcessInfo
                  :process-list="dialogDatas.orderData.processData.tableData"
                  @add-process="dialogDatas.orderData.processData.handleAdd"
                  @delete-process="dialogDatas.orderData.processData.handleDelete"
                  @replace-process="dialogDatas.orderData.processData.handleReplace"
                ></ProductionProcessInfo>
              </el-tab-pane>
              <el-tab-pane label="Bom" name="Bom">
                <ProductionBomInfo
                  :work-order-id="dialogDatas.orderData.orderId"
                  :bom-data="dialogDatas.orderData.bomData.tableData"
                ></ProductionBomInfo>
              </el-tab-pane>
              <el-tab-pane label="SN清单" name="SN清单">
                <production-sn-info
                  :work-order-id="dialogDatas.orderData.orderId"
                  :sn-data="dialogDatas.orderData.snData.tableData"
                ></production-sn-info>
              </el-tab-pane>
            </el-tabs>
          </el-scrollbar>

          <template #footer>
            <span>
              <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogDatas.confirmBtnClick">确定</el-button>
            </span>
          </template>
        </el-dialog>

        <!-- 表格右键菜单 -->
        <teleport to="body">
          <el-dropdown
            ref="dropdown"
            v-model="tableDatas.filters.contextMenu.visible"
            :hide-on-click="true"
            trigger="contextmenu"
          >
            <div
              :style="{ 
                left: tableDatas.filters.contextMenu.left + 'px',
                top: tableDatas.filters.contextMenu.top + 'px',
                position: 'fixed',
              }"
            ></div>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="tableDatas.handleMenuClick('查看详情')">查看详情</el-dropdown-item>
                <el-dropdown-item @click="tableDatas.handleMenuClick('删除')" divided>删除</el-dropdown-item>
                <el-dropdown-item @click="tableDatas.handleMenuClick('复制')">复制</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </teleport>

        <el-row :gutter="10">
          <!-- 状态选择 -->
          <el-col :span="3">
            <el-card class="marginTop10" shadow="never">
              <el-scrollbar max-height="85vh">
                <div v-for="option in tableDatas.filters.stateOptions" style="text-align: left">
                  <el-radio
                    v-model="tableDatas.filters.state"
                    :value="option['value']"
                    size="large"
                    @change="getTableDatas"
                    >{{option['label']}}</el-radio
                  >
                </div>
              </el-scrollbar>
            </el-card>
          </el-col>
          <!-- 订单展示 -->
          <el-col :span="21">
            <el-auto-resizer style="height: 90vh; width: 100%">
              <template #default="{ height, width }">
                <el-table-v2
                  class="bordered-table marginTop10"
                  :data="tableDatas.tableDatasAfterPage"
                  :columns="tableDatas.virtualTableColumns"
                  :width="width"
                  :height="height"
                  fixed
                  :row-event-handlers="{onContextmenu:tableDatas.handleVirtualContextMenu}"
                  :row-class="tableDatas.tableRowClassName"
                >
                  <!-- 自定义单元格渲染 -->
                  <template #cell="{ column, rowData, rowIndex }">
                    <template v-if="column.key === 'checked'">
                      <el-checkbox v-model="rowData.checked" />
                    </template>
                    <template v-else-if="column.key === 'operate'">
                      <div>
                        <el-button type="success" @click="tableDatas.editBtnClick(rowData)">修改</el-button>
                        <el-popconfirm
                          confirm-button-text="确定"
                          cancel-button-text="取消"
                          title="确定删除该条记录?"
                          @confirm="tableDatas.deleteBtnClick(rowData)"
                        >
                          <template #reference>
                            <el-button type="danger">删除</el-button>
                          </template>
                        </el-popconfirm>
                      </div>
                    </template>
                    <template v-else-if="['WOPLANDATE', 'WOCOMDATE', 'CREATETIME'].includes(column.key)">
                      {{ rowData[column.key]?.substring(0, 10) || rowData[column.key] }}
                    </template>
                    <template v-else> {{ rowData[column.key] }} </template>
                  </template>
                </el-table-v2>
              </template>
            </el-auto-resizer>
          </el-col>
        </el-row>
      </div>
    </div>
  </body>
  <script type="module">
    import myAxios from './myAxios/myAxios.js'
    import myAxiosWXPost from './myAxios/myAxiosWXPost.js'
    import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
    import v4 from './publicJs/uuidv4.js'
    // import axios from 'axios'
    let content = {
      xswerks: 'Q902',
      kcwerks: 'Q902',
      lgorts: '1007,1008,3001,3003,3006,7001',
      matcode: 'E0000404W',
      sonmatcode: '',
    }
    myAxiosWXPost.get(`http://192.168.100.28:44348/`, `unClearSalePo_AnXin`, content).then((pushRes) => {
      console.log('pushRes :>> ', pushRes)
      if (pushRes.includes('成功')) {
        let nowStr = dayjs().format('YYYY/MM/DD HH:mm:ss')
        console.log('pushRes :>> ', pushRes)
        // myAxios.post('陈帅廷更新食堂包厢记录推送时间', `${order.BX_RECORD_ID}\t${nowStr}`)
      }
    })

    // 准备请求数据，根据 C# 代码中的对象结构


    const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue
    const { Bottom, Top, Right, Delete, Refresh, Calendar, Check, Search } = ElementPlusIconsVue

    const app = createApp({
      name: 'ProductionOrderManagement',
      components: {
        ProductionOrderInfo: ProductionOrderInfo,
        ProductionProcessInfo: ProductionProcessInfo,
        ProductionBomInfo: ProductionBomInfo,
        Bottom,
        Top,
        Right,
        Delete,
        Refresh,
        Calendar,
        Check,
        Search,
      },
      setup() {
        let loading = ref(false)
        let addBtnClick = function () {
          showFormDialog()
        }
        let xiaDaBtnClick = async function () {
          try {
            let selectData = tableDatas.oritableData.filter((el) => el.checked)
            let errorMsg = ''
            if (selectData.length === 0) {
              throw new Error(`请选择要下达的订单！`)
            } else {
              for (let i = 0; i < selectData.length; i++) {
                let row = selectData[i]
                let JM_WORKORDERID = row.JM_WORKORDERID
                let orderParam = `JM_WORKORDER🈹JM_WORKORDERID🈹${JM_WORKORDERID}`
                let orderInfoList = await myAxios.get('陈帅廷查询大连通用数据', `${orderParam}`)
                console.log('orderInfoList :>> ', orderInfoList)
                if (orderInfoList.length === 0) {
                  throw new Error(`订单不存在!`)
                } else {
                  let orderEntity = orderInfoList[0]
                  let checkResult = await checkOrderBeforeXiaDa(orderEntity, row)
                  if (checkResult.includes('成功')) {
                    //更新订单状态
                    let result = await myAxios.post('陈帅廷更新订单状态', `${JM_WORKORDERID}🈹${1}`, '9900')
                    if (result.includes(`成功`)) {
                      let index = tableDatas.oritableData.indexOf(row)
                      tableDatas.oritableData.splice(index, 1)
                      showSuccess('下达成功')
                    } else {
                      showWarning('更新失败' + result)
                    }
                  } else {
                    throw new Error(checkResult)
                  }
                }
              }
            }
          } catch (error) {
            showWarning(error.message)
          }
        }

        let deleteBtnClick = async function () {
          try {
            let selectData = tableDatas.oritableData.filter((el) => el.checked)
            let errorMsg = ''
            if (selectData.length === 0) {
              throw new Error(`请选择要删除的订单！`)
            } else {
              ElMessageBox.confirm('确定删除生产订单吗？该操作是不可逆的?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              })
                .then(async () => {
                  for (let i = 0; i < selectData.length; i++) {
                    let row = selectData[i]
                    let JM_WORKORDERID = row.JM_WORKORDERID
                    let orderParam = `JM_WORKORDER🈹JM_WORKORDERID🈹${JM_WORKORDERID}`
                    let orderInfoList = await myAxios.get('陈帅廷查询大连通用数据', orderParam)
                    console.log('orderInfoList :>> ', orderInfoList)
                    if (orderInfoList.length === 0) {
                      throw new Error(`订单不存在!`)
                    } else {
                      let orderEntity = orderInfoList[0]
                      let checkResult = await checkOrderBeforeDelete(orderEntity)
                      if (checkResult.includes('成功')) {
                        // 删除逻辑
                      } else {
                        throw new Error(checkResult)
                      }
                    }
                  }
                })
                .catch((error) => {
                  if (error.message) {
                    showWarning(error.message)
                  }
                })
            }
          } catch (error) {
            showWarning(error.message)
          }
        }

        //#region 检查函数
        let checkOrderBeforeXiaDa = function (orderEntity, row) {
          return new Promise(async (resolve, reject) => {
            let JM_WORKORDERID = orderEntity.JM_WORKORDERID
            try {
              // 检查订单
              if (orderEntity.WOSTATE != 0) {
                throw new Error('不是新建状态')
              }
              if (orderEntity.WOPLANQTY <= 0) {
                throw new Error('计划数量应当大于0')
              }
              // 检查工艺
              let gyParam = `JM_ORDERROUTE🈹JM_WORKORDERID🈹${JM_WORKORDERID}`
              let gyInfoList = await myAxios.get('陈帅廷查询大连通用数据', `${gyParam}`)
              if (gyInfoList.filter((p) => p.WORKTYPE == 0).length <= 0) {
                throw new Error('没有要采集的订单工序,请配置')
              }
              for (let j = 0; j < gyInfoList.length; j++) {
                let orderRouteEntity = gyInfoList[j]

                if (orderRouteEntity.OUTWORKTAG == 0) {
                  if (orderRouteEntity.AVERAGEWORKTIME <= 0) {
                    throw new Error('订单工序的平均工时应当大于0')
                  }
                }
              }
              // 检查BOM
              let bomParam = `JM_WOBOM🈹JM_WORKORDERID🈹${JM_WORKORDERID}`
              let bomInfoList = await myAxios.get('陈帅廷查询大连通用数据', `${bomParam}`)
              for (let j = 0; j < bomInfoList.length; j++) {
                if (!orderBom.WOSHOP) {
                  throw new Error('Bom需要配置对应的车间')
                }
                if (!orderBom.WOROUTE) {
                  throw new Error('Bom需要配置对应的工序')
                }
                if (orderBom.BOMDOSAGE <= 0) {
                  throw new Error('BOM单台配置数量要大于0')
                }
                if (!orderBom.WOROUTE) {
                  return
                }
                if (gyInfoList.filter((p) => p.JM_ORDERROUTEID == orderBom.WOROUTE).length == 0) {
                  throw new Error('BOM的工序不在订单工艺中')
                }
              }
              // 检查流水号
              let snInfoList = await myAxios.get('陈帅廷查询大连订单SN使用状态', `${JM_WORKORDERID}`, `9900`)
              if (orderEntity.WOPLANQTY != snInfoList.length) {
                throw new Error('SN号不足')
              }
              for (let j = 0; j < snInfoList.length; j++) {
                let snItem = snInfoList[i]
                let prosn = snItem.PROSN
                let snRepeatParam = `JM_WORKORDERSN🈹PROSN🈹${prosn}`
                let snRepeatData = await myAxios.get('陈帅廷查询大连通用数据', `${snRepeatParam}`)
                if (snRepeatData.length > 1) {
                  throw new Error('流水号 ' + prosn + ' 重复')
                }
              }

              resolve(`订单 ${JM_WORKORDERID} 下达检查成功,可以下达`)
            } catch (err) {
              resolve(`订单 ${JM_WORKORDERID} ` + err.message)
            }
          })
        }

        let checkOrderBeforeDelete = function (orderEntity) {
          return new Promise(async (resolve, reject) => {
            let JM_WORKORDERID = orderEntity.JM_WORKORDERID
            try {
              //#region  检查转子
              let ddParam = `${JM_WORKORDERID}🈹${`1\',\'2\',\'3\',\'4`}`
              let ddInfoList = await myAxios.get('陈帅廷查询大连订单调度信息', `${ddParam}`)
              //查找调度下SN，看是否有转子，如果有转子，则不让删除
              for (let i = 0; i < ddInfoList.length; i++) {
                let zzParam = `JM_JOBBATCHNO🈹JM_JOBDISPATCHID🈹${ddInfoList[i]['JM_JOBDISPATCHID']}`
                let result = await myAxios.get('陈帅廷查询大连通用数据', `${zzParam}`)
                if (result.filter((el) => el.PROSN.startsWith('Z')).length > 0) {
                  throw new Exception('转子调度已经下达，不能删除')
                }
              }
              //#endregion

              //#region 检查领料单
              let lldParam = `MATERIALAPPLYFORSN🈹ORDERNO🈹${JM_WORKORDERID}`
              let lldInfoList = await myAxios.get('陈帅廷查询大连通用数据', `${lldParam}`)
              if (lldInfoList.filter((p) => p.STATE == 1).length > 0) {
                throw new Error('物料配送单已生成，不能删除')
              }
              //#endregion

              //#region 检查TASKCARD
              let snParam = `JM_WORKORDERSN🈹JM_WORKORDERID🈹${JM_WORKORDERID}`
              let snInfoList = await myAxios.get('陈帅廷查询大连通用数据', snParam)
              for (let i = 0; i < snInfoList.length; i++) {
                let snInfo = snInfoList[i]
                let tkParam = `TASKCARD🈹PROSN🈹${snInfo['PROSN']}`
                let tkInfoList = await myAxios.get('陈帅廷查询大连通用数据', tkParam)
                let length = tkInfoList.length
                if (length > 0) {
                  throw new Error('SN[' + snInfo['PROSN'] + ']已经生成任务卡片，不能删除')
                }
              }
              //#endregion

              resolve(`订单 ${JM_WORKORDERID} 下达检查成功,可以下达`)
            } catch (err) {
              resolve(`订单 ${JM_WORKORDERID} ` + err.message)
            }
          })
        }
        //#endregion

        let buttonClicks = {
          addBtnClick: addBtnClick,
          xiaDaBtnClick: xiaDaBtnClick,
          deleteBtnClick: deleteBtnClick,
        }

        let showFormDialog = function (data) {
          dialogDatas.title = '订单号: ' + data.orderId
          dialogDatas.orderData = data
          dialogDatas.dialogFormVisible = true
        }

        let dialogDatas = reactive({
          title: '',
          orderData: {
            workorder: {},
            processData: {
              tableData: [],
              handleAdd: function () {
                console.log('1 :>> ', 1)
              },
              handleDelete: function () {
                console.log('2 :>> ', 2)
              },
              handleReplace: function () {
                console.log('3 :>> ', 3)
              },
            },
            bomData: {
              tableData: [],
            },
            snData: {
              tableData: [],
            },
          },
          dialogFormVisible: false,
          confirmBtnClick: function () {},
        })

        let getTableDatas = function () {
          loading.value = true
          let params = `${tableDatas.filters.state}`
          let name = `陈帅廷查询大连订单信息(测试)`
          if (tableDatas.filters.state == 10) {
            params = `<>`
            name = `陈帅廷查询大连排产中订单`
          } else if (tableDatas.filters.state == 11) {
            params = `=`
            name = `陈帅廷查询大连排产中订单`
          }
          myAxios
            .get(name, params, '9900')
            .then((res) => {
              if (res instanceof Array) {
                loading.value = false
                tableDatas.oritableData = [...res]
              } else {
                loading.value = false
                showWarning('获取数据失败res!' + res)
              }
            })
            .catch((err) => {
              loading.value = false
              showWarning('获取数据失败err!' + err)
            })
        }

        onMounted(() => {
          getTableDatas()
        })

        let searchKeys = ['JM_WORKORDERID', 'MATCODE', 'MATNAME']
        let dropdown = ref(null)
        let tableDatas = reactive({
          virtualTableColumns: [
            {
              key: 'index',
              title: '序号',
              width: 60,
              align: 'center',
              cellRenderer: ({ rowIndex }) => rowIndex + 1,
            },
            {
              key: 'checked',
              dataKey: 'checked',
              title: '选择',
              width: 60,
              align: 'center',
            },
            {
              key: 'JM_WORKORDERID',
              dataKey: 'JM_WORKORDERID',
              title: '订单号',
              width: 100,
              align: 'center',
            },
            {
              key: 'MATCODE',
              title: '物料号',
              width: 100,
              align: 'center',
            },
            {
              key: 'MATNAME',
              title: '物料描述',
              width: 200,
              align: 'center',
            },
            {
              key: 'WOPLANDATE',
              title: '计划开始日期',
              width: 110,
              align: 'center',
            },
            {
              key: 'WOCOMDATE',
              title: '计划完成日期',
              width: 110,
              align: 'center',
            },
            {
              key: 'WOPLANQTY',
              title: '计划数量',
              width: 90,
              align: 'center',
            },
            {
              key: 'WOSCHEDULEQTY',
              title: '排产数量',
              width: 90,
              align: 'center',
            },
            {
              key: 'WOCOMPQTY',
              title: '完成数量',
              width: 90,
              align: 'center',
            },
            {
              key: 'WOCOMMENTS',
              title: '备注',
              width: 500,
              align: 'center',
            },
            {
              key: 'CREATETIME',
              title: '创建日期',
              width: 100,
              align: 'center',
            },
          ],
          filters: {
            state: 0,
            stateOptions: [
              { value: 0, label: '新建' },
              { value: 10, label: '开始' },
              { value: 11, label: '排产完' },
              { value: 3, label: '完工' },
              { value: 2, label: '暂停或关闭' },
            ],
            searchText: '',
            contextMenu: {
              visible: false,
              left: 0,
              top: 0,
              row: null,
              index: -1,
            },
            currentPage: 1,
            pagesize: 10,
            handleSizeChange(val) {
              tableDatas.filters.pagesize = val
            },
            handleCurrentChange(val) {
              tableDatas.filters.currentPage = val
            },
          },
          tableDatasAfterFilter: computed(() => {
            let fData = tableDatas.oritableData
            if (tableDatas.filters.searchText) {
              let searchText = tableDatas.filters.searchText
              fData = fData.filter((item) => {
                return searchKeys.some((key) => {
                  return String(item[key]).toLowerCase().includes(searchText.toLowerCase())
                })
              })
            }
            return fData
          }),
          tableDatasAfterPage: computed(() => {
            let fData = tableDatas.tableDatasAfterFilter
            return fData
          }),
          oritableData: [],
          handleVirtualContextMenu: function ({ rowData: row, event }) {
            event.preventDefault()
            tableDatas.filters.contextMenu.visible = false
            nextTick(() => {
              dropdown.value.handleClose()
            })
            tableDatas.filters.contextMenu = {
              visible: true,
              left: event.clientX,
              top: event.clientY,
              row: row,
              index: tableDatas.oritableData.indexOf(row),
            }
            setTimeout(() => {
              dropdown.value.handleOpen()
            }, 1)
          },
          handleMenuClick: async function (action) {
            loading.value = true
            tableDatas.filters.contextMenu.visible = false
            let orderId = tableDatas.filters.contextMenu.row.JM_WORKORDERID
            let orderData = {
              orderId: orderId,
              workorder: tableDatas.filters.contextMenu.row,
              processData: {
                tableData: [],
              },
              bomData: {
                tableData: [],
              },
              snData: {
                tableData: [],
              },
            }
            let processParam = `${orderId}`
            let processData = await myAxios.get('陈帅廷查询大连订单工艺路线', processParam)
            orderData.processData.tableData = processData

            let bomParam = `${orderId}`
            let bomData = await myAxios.get('陈帅廷查询大连订单BOM', bomParam)
            orderData.bomData.tableData = bomData

            let snParam = `${orderId}`
            let snData = await myAxios.get('陈帅廷查询大连订单SN使用状态', snParam)
            orderData.snData.tableData = snData

            switch (action) {
              case '查看详情':
                showFormDialog(orderData)
                break
              case '删除':
                tableDatas.oritableData.splice(tableDatas.filters.contextMenu.index, 1)
                break
              case '复制':
                break
            }
            loading.value = false
          },
          tableRowClassName: function ({ rowData, rowIndex }) {
            if (rowData.checked) {
              return 'success-row'
            }
            return rowIndex % 2 === 1 ? 'striped-row' : ''
          },
          editBtnClick: function (row) {
            showFormDialog(row)
          },
          deleteBtnClick: function (row) {
            loading.value = true
            let JM_WORKORDERID = row.JM_WORKORDERID
            let params = `0004`
            myAxios
              .post('删除', params)
              .then((res) => {
                if (res.includes('成功')) {
                  loading.value = false
                  showSuccess('删除成功!' + res)
                  tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1)
                } else {
                  loading.value = false
                  showWarning('删除失败res!' + res)
                }
              })
              .catch((err) => {
                loading.value = false
                showWarning('删除失败err!' + err)
              })
          },
        })

        return {
          loading,
          buttonClicks,
          getTableDatas,
          dialogDatas,
          dropdown,
          tableDatas,
        }
      },
    })

    app.use(ElementPlus)
    app.mount('#app')
  </script>
  <style>
    .marginTop10 {
      margin-top: 10px;
    }
    .el-table .warning-row {
      background-color: var(--el-color-warning-light-9);
    }
    .success-row {
      background-color: var(--el-color-success-light-7);
    }

    .striped-row {
      background-color: #f5f7fa;
    }

    /* 边框样式 */
    .bordered-table {
      border: 1px solid #ebeef5;
    }

    .bordered-table .el-table-v2__header-cell {
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }

    .bordered-table .el-table-v2__row-cell {
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  </style>
</html>
